<template>
	<view>
		<nav-box title="阶段详情列表"></nav-box>
		<block v-for="item in list" :key="item.id">
			<view class="item-box">
				<view class="info-box">
					<view class="title">
						<text>{{item.title}}</text>
					</view>
					<text>类型：{{item.type}}</text>
					<text>状态：{{item.state}}</text>
				</view>
				<image src="../../static/images/forward.png" mode=""></image>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						id: 1,
						title: '标题1',
						type: '类型1',
						state: 1
					},
					{
						id: 2,
						title: '标题2',
						type: '类型2',
						state: 0
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
.item-box {
	display: flex;
	align-items: center;
	padding: 30upx 40upx;
	background: #FFFFFF;
	justify-content: space-between;
	image {
		width: 40upx;
		height: 40upx;
	}
	text {
		display: inline-block;
		&:nth-child(3) {
			margin-left: 70upx;
		}
	}
	.title {
		font-size: 32upx;
		margin-bottom: 16upx;
	}
	&:not(:last-child) {
		border-bottom: 2upx solid #F1F1F1;
	}
}
</style>
